<template>
  <div :class="$style.wrapper">
    <div :class="$style.ranks">
      <h1 :class="type === 3 ? $style.yujuesai : $style.title"></h1>
      <div :class="$style.ranks_left"></div>
      <div :class="$style.ranks_center">
        <div :class="$style.ranks_center_top"></div>
        <div :class="$style.ranks_center_content">
          <div :class="$style.ranks_center_content_header">
            <span>名次</span>
            <span>队伍ID</span>
            <span>击杀数</span>
            <span>开火数</span>
            <span>击中数</span>
            <span>存血数</span>
            <span>击中数/开火数</span>
            <span>击杀数/击中数</span>
            <span>击杀数/开火数</span>
            <span>击中数/比赛场数</span>
            <span>用时/比赛场数</span>
            <span>存血数/比赛场数</span>
          </div>
          <div :class="$style.ranks_center_content_body" ref="body">
            <div v-for="item in data" :key="item.rank">
              <span>{{ item.Rank }}</span>
              <span>{{ item.Player }}</span>
              <span>{{ item.Kill }}</span>
              <span>{{ item.Fire }}</span>
              <span>{{ item.Hit }}</span>
              <span>{{ item.Life }}</span>
              <span>{{ item.Hit }} / {{ item.Fire }}</span>
              <span>{{ item.Kill }} / {{ item.Hit }}</span>
              <span>{{ item.Kill }} / {{ item.Fire }}</span>
              <span>{{ item.Hit }} / {{ item.Rounds }}</span>
              <span>{{ item.CostTime }} / {{ item.Rounds }}</span>
              <span>{{ item.Life }} / {{ item.Rounds }}</span>
            </div>
          </div>
        </div>
        <div :class="$style.ranks_center_bottom"></div>
      </div>
      <div :class="$style.ranks_right"></div>
    </div>
  </div>
</template>

<style lang="scss" module>
@mixin background_style {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@mixin rank_item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 8px 8px;
  border-bottom: 1px solid #eee;
}
.wrapper {
  color: #fff;
  font-size: 12px;
  @include background_style;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("./assets/背景.png");
  .ranks {
    display: flex;
    position: absolute;
    top: 53%;
    left: 50%;
    transform-origin: 0 0;
    transform: scale(0.6) translate3d(-50%, -50%, 0);
    width: 2380px;
    .title {
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 70px;
      white-space: nowrap;
      content: url("./assets/ai_chelunzhan.png");
    }
    .yujuesai {
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 70px;
      white-space: nowrap;
      content: url("./assets/ai_yuhjuesai.png");
    }
    &_left {
      @include background_style;
      // background-image: url("./assets/左.png");
      width: 119px;
      height: 793px;
      flex-grow: 0;
      position: relative;
    }
    &_center {
      height: 1432px;
      display: flex;
      flex-direction: column;
      flex: 1;
      &_top {
        @include background_style;
        background-image: url("./assets/上.png");
        width: 100%;
        height: 55px;
        position: relative;
        &::before {
          content: url("./assets/wars of tanks.png");
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate3d(-50%, -50%, 0) scale(0.9);
        }
      }
      &_content {
        width: 100%;
        height: calc(1423px - 55px - 18px);
        font-size: 2em;
        text-align: center;
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        &_header,
        &_body > div {
          display: flex;
          span {
            @include rank_item;
            flex-shrink: 0;
            flex-grow: 0;
            flex-basis: 9%;
          }
          span:nth-child(1) {
            flex-basis: 4%;
          }
          span:nth-child(2) {
            flex-basis: 14%;
            overflow: hidden;
          }
          span:nth-child(3),
          span:nth-child(4),
          span:nth-child(5),
          span:nth-child(6) {
            flex-basis: 7%;
          }
        }
        &_body {
          flex-grow: 1;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          & > div:nth-child(1) {
            span:nth-child(1) {
              @include background_style;
              background-size: contain;
              background-image: url("./assets/1.png");
              min-width: 53px;
              color: transparent;
            }
          }
          & > div:nth-child(2) {
            span:nth-child(1) {
              @include background_style;
              background-size: contain;
              background-image: url("./assets/2.png");
              min-width: 53px;
              color: transparent;
            }
          }
          & > div:nth-child(3) {
            span:nth-child(1) {
              @include background_style;
              background-size: contain;
              background-image: url("./assets/3.png");
              min-width: 53px;
              color: transparent;
            }
          }
        }
      }
      &_bottom {
        @include background_style;
        background-image: url("./assets/下.png");
        height: 18px;
        width: 100%;
      }
    }
    &_right {
      @include background_style;
      // background-image: url("./assets/右.png");
      width: 110px;
      height: 793px;
      flex-grow: 0;
    }
  }
}
</style>

<script>
import { wheelWarResult } from "./utils/request";
export default {
  data() {
    return {
      data: [],
      current: 1,
      type: Number(this.$route.query.type || 2)
    };
  },
  methods: {
    async fetchRanks() {
      try {
        const { data } = await wheelWarResult(this.type);
        if (data && data.status === 100000) {
          this.data = data.ranks;
        } else {
          data.desc && this.$toast(data.desc);
        }
      } catch (e) {
        console.error("error");
      }
    },
    // 轮询数据
    poll() {
      this.pollTimer = setInterval(() => {
        this.fetchRanks();
      }, 10000);
    },
    // ws() {
    //   const w = new WebSocket(
    //     `ws://${process.env.VUE_APP_API_ORIGIN}/api/tank/ws?mode=wheel_war`
    //   );
    //   w.onerror = () => {
    //     console.error("ws error");
    //   };
    //   w.onclose = () => {
    //     console.error("ws was closed");
    //     setTimeout(() => this.ws(), 3000);
    //   };
    //   w.onmessage = () => {
    //     this.fetchRanks();
    //   };
    // },
  },
  mounted() {
    this.fetchRanks();
    this.poll();
    // this.ws();
    const itemHeight = 80;
    this.timer = setInterval(() => {
      let top = itemHeight * 4 * this.current;
      if (top >= this.data.length * itemHeight - 4 * itemHeight) {
        this.current = 0;
        top = 0;
      }
      this.$refs.body.scrollTo({
        behavior: "smooth",
        top,
      });
      this.current++;
    }, 10000);
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.pollTimer) {
      clearInterval(this.pollTimer);
    }
  },
};
</script>
